
<template>
    <div class="box box_animation_b"  v-if="skeleton">
        <div class="title">
            <h3 :style="{'color':title_color}"><slot></slot></h3>
            <img :src="title_img" alt="" style="width: 1.6rem">
        </div>
        <ul v-for="item in essay" v-if="essay.length>0">
            <li v-if="item.wid !== nowWid ">
                <router-link :to="{name:'detail',params:{id:item.wid}}" @click="essayInfo(item)"
                             :style="{'color': $store.state.nowTime==='moon' ? '#fff' : titleLi_color}">
                    {{item.title}}
                </router-link>
                <img :src="content_img" alt="">
            </li>
        </ul>
        <h3 v-else>暂无作品</h3>
    </div >
    <div v-else class="circle_box">
        <CircleLoading></CircleLoading>
    </div>
</template>

<script>
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";
export default {
    name: "UserArticleContent",
    components: {CircleLoading},
    props:['essay','title_img','content_img','title_color','nowWid','titleLi_color'],
    methods:{
        essayInfo(item){
            window.localStorage.setItem("essayInfo",JSON.stringify(item));
            this.$router.replace({path:'/blank'});
        },
    },
    data(){
      return{
          skeleton:true,
      }
    },
    watch:{
        essay(newValue,oldValue){
                setTimeout(()=>{
                    this.skeleton=true
                },100)

        }
    },

}
</script>

<style scoped>
.circle_box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    border-radius:5px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: rgba(246, 247, 248, 0.7);
}
.title{
    display: flex;
    align-items: center;
    justify-content: space-between ;
    margin-bottom: 5px;
}
.box{
    display: flex;
    padding: 10px 10px;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5px;

}
.box li{
    display: flex;
    align-items: center;
    justify-content: space-between;

}
.box li img{
    width: 1.3rem;
}
a{
    display: inline-block;
    padding: 5px 0;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: left ;
    transition: all .2s;
}
a:hover{
    color: #509eec !important;
    transform: scale(1.06);
}
.box h3{
    padding: 5px;
    display: inline-block;
    border-bottom: 1px solid #8a8787;
    font-weight: bold;
}










</style>